<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在jquery中css方法的应用</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            // console.log($('div').css('width'));//200px 带px
            // console.log($('div').width());//200 不带px
            // alert(document.getElementsByTagName("div")[0].style.width);//200px

            // console.log(typeof $('div').css('width'));//string
            // console.log(typeof $('div').width());//number

            // $('div').width(300);//设置宽度的值 第一种方法
            // $('div').width('300px');//设置宽度的值 第二种方法
            // document.getElementsByTagName("div")[0].style.width="300px";//设置宽度的值 第三种方法

            // $('div').width(function (index,value) {
            //     return value+300;// 对宽度进行计算
            // });
            // var oldDivWidth=document.getElementsByTagName("div")[0].style.width;
            // console.log(parseInt(oldDivWidth)+200+"px");//得到的400px
            // newDivWidth=parseInt(oldDivWidth)+200+"px";//设置宽度

            // $('div').height(400);//设置高度
            // $('div').height(function (index,value) {
            //         return value+500;// 对高度的值进行计算
            // });
            // console.log("width"+"="+$('div').width());//200
            // console.log("inner"+"="+$('div').innerWidth());//400
            // console.log("outer"+"="+$('div').outerWidth(true));//600

            // console.log("height"+"="+$('div').height());//50
            // console.log("inner"+"="+$('div').innerHeight());//250
            // console.log("outer"+"="+$('div').outerHeight(true));//450
            // alert(document.getElementsByTagName("div")[0].offsetWidth);

            // alert("offsetLeft"+"="+$('div').offset().left);//10
            // alert("offsetTop"+"="+$('div').offset().top);//10

            // alert("offsetLeft"+"="+$('strong').offset().left);//11 相对于可见窗口的偏移量
            // alert("offsetTop"+"="+$('strong').offset().top);//11 相对于可见窗口的偏移量
            //
            // alert("offsetLeft"+"="+$('strong').position().left);//1 相对于父元素的偏移量
            // alert("offsetTop"+"="+$('strong').position().top);//1 相对于父元素的偏移量

            // alert($(window).scrollTop());//0
            // $(window).scrollTop(200);//滚动条直接滚动到200这
            // $(window).scrollTop(0);//回到顶部

        });
    </script>
</head>
<body>
<script>

</script>
<script>
    /*1.如何获取/设置元素的宽度
            获取宽度  Jquery中   第一种方法$   $('div').css('width') 带px
                                第二种方法    $('div').width()  不带px
                      js中      document.getElementsByTagName("div")[0].style.width 带px
            设置宽度  jquery中   第一种方法  $('div').width(300)
                                第二种方法  $('div').width('300px')
                      js中       document.getElementsByTagName("div")[0].style.width="300px";

      2.如何通过fun设置元素的宽度
           2.1通过fun设置宽度
                    jquery中  $('div').width(function (index,value) {
                               return value+300;// 对宽度进行计算
                                 });

                     js中
                          var oldDivWidth=document.getElementsByTagName("div")[0].style.width;
                          newDivWidth=parseInt(oldDivWidth)+200+"px";
            2.2通过fun设置高度 jquery中 $('div').height(400);
                                $('div').height(function (index,value) {
                                    return value+500;// 对高度的值进行计算
                                    });

      3.如何获得元素 包含内边距的款度和高度
                        $('div').width()
                        $('div').height()
      4.如果获得元素 包含边框 内边距的宽度和高度
                   $('div').innerWidth()
                   $('div').innerHeight()
     5.如果获得元素 包含边框 内边距,外边距的宽度和高度
                $('div').outerWidth(true)
                $('div').outerHeight(true)
      6.如果获得某个元素相对于可视窗口的位置偏移量
                $('div').offset().left
                $('div').offset().top
      7.如果获得某个元素相对于父元素的偏移量
                $('strong').position().left
                $('strong').position().top
      8.如果获得/设置垂直滚动条的值
            $(window).scrollTop()获得上下滚动条的值
            $(window).scrollTop(200)设置上下滚动条的值
            $(window).scrollTop(0)值为0 表示回到顶部
    * */
</script>
<!--    <div style="width: 200px ;padding:100px;margin: 100px;height: 50px">-->
<!--        <strong>CSS样式</strong>-->
<!--    </div>-->
<div style="position: absolute;top: 10px;left: 10px">
    <strong style="position: absolute;left: 1px;top: 1px">strong</strong>
</div>
<br />
<p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p>
<p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p>
<p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p>
<p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p><p>500</p>
</body>
</html>